import React, { useEffect, useRef, useState } from 'react'
import ReactECharts from 'echarts-for-react';
import { Row, Col } from 'antd'
import * as echarts from 'echarts'
import $ from 'jquery'
const Index: React.FC = () => {

	const option = {
		xAxis: {
		  type: 'category',
		  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		},
		yAxis: {
		  type: 'value'
		},
		series: [
		  {
			data: [150, 230, 224, 218, 135, 147, 260],
			type: 'line'
		  }
		]
	  };

	  const option1 = {
		color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
		title: {
		  text: 'Gradient Stacked Area Chart'
		},
		tooltip: {
		  trigger: 'axis',
		  axisPointer: {
			type: 'cross',
			label: {
			  backgroundColor: '#6a7985'
			}
		  }
		},
		legend: {
		  data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
		},
		toolbox: {
		  feature: {
			saveAsImage: {}
		  }
		},
		grid: {
		  left: '3%',
		  right: '4%',
		  bottom: '3%',
		  containLabel: true
		},
		xAxis: [
		  {
			type: 'category',
			boundaryGap: false,
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		  }
		],
		yAxis: [
		  {
			type: 'value'
		  }
		],
		series: [
		  {
			name: 'Line 1',
			type: 'line',
			stack: 'Total',
			smooth: true,
			lineStyle: {
			  width: 0
			},
			showSymbol: false,
			areaStyle: {
			  opacity: 0.8,
			  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
				{
				  offset: 0,
				  color: 'rgb(128, 255, 165)'
				},
				{
				  offset: 1,
				  color: 'rgb(1, 191, 236)'
				}
			  ])
			},
			emphasis: {
			  focus: 'series'
			},
			data: [140, 232, 101, 264, 90, 340, 250]
		  },
		  {
			name: 'Line 2',
			type: 'line',
			stack: 'Total',
			smooth: true,
			lineStyle: {
			  width: 0
			},
			showSymbol: false,
			areaStyle: {
			  opacity: 0.8,
			  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
				{
				  offset: 0,
				  color: 'rgb(0, 221, 255)'
				},
				{
				  offset: 1,
				  color: 'rgb(77, 119, 255)'
				}
			  ])
			},
			emphasis: {
			  focus: 'series'
			},
			data: [120, 282, 111, 234, 220, 340, 310]
		  },
		  {
			name: 'Line 3',
			type: 'line',
			stack: 'Total',
			smooth: true,
			lineStyle: {
			  width: 0
			},
			showSymbol: false,
			areaStyle: {
			  opacity: 0.8,
			  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
				{
				  offset: 0,
				  color: 'rgb(55, 162, 255)'
				},
				{
				  offset: 1,
				  color: 'rgb(116, 21, 219)'
				}
			  ])
			},
			emphasis: {
			  focus: 'series'
			},
			data: [320, 132, 201, 334, 190, 130, 220]
		  },
		  {
			name: 'Line 4',
			type: 'line',
			stack: 'Total',
			smooth: true,
			lineStyle: {
			  width: 0
			},
			showSymbol: false,
			areaStyle: {
			  opacity: 0.8,
			  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
				{
				  offset: 0,
				  color: 'rgb(255, 0, 135)'
				},
				{
				  offset: 1,
				  color: 'rgb(135, 0, 157)'
				}
			  ])
			},
			emphasis: {
			  focus: 'series'
			},
			data: [220, 402, 231, 134, 190, 230, 120]
		  },
		  {
			name: 'Line 5',
			type: 'line',
			stack: 'Total',
			smooth: true,
			lineStyle: {
			  width: 0
			},
			showSymbol: false,
			label: {
			  show: true,
			  position: 'top'
			},
			areaStyle: {
			  opacity: 0.8,
			  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
				{
				  offset: 0,
				  color: 'rgb(255, 191, 0)'
				},
				{
				  offset: 1,
				  color: 'rgb(224, 62, 76)'
				}
			  ])
			},
			emphasis: {
			  focus: 'series'
			},
			data: [220, 302, 181, 234, 210, 290, 150]
		  }
		]
	  };

	  
	return (
		<div>
			<Row>
				<Col span={12}>
					<ReactECharts option={option} className='my-table'></ReactECharts>
				</Col>
				<Col span={12}>
					<ReactECharts option={option1} className='my-table'></ReactECharts>

				</Col>
				<Col span={12}>

				</Col>
			</Row>
		</div>
	)
}

export default Index